<template>
    <el-card class="box-card" ref="boxcard">
        <div slot="header" class="clearfix">
            <span class="cygSw">断面过程线</span>
            <!--<el-button type="primary" style="float: right; padding: 3px 0">操作按钮</el-button>-->
            <!--<el-button type="primary">主要按钮</el-button>-->
            <el-switch class="proSwitch"  v-model="value3" inactive-text="连接线" @change="visibleModeChange"/>
        </div>
        <div class="chartLine" id="transverseSection" :style="{width: mapWidth}">
        </div>
    </el-card>
</template>

<script>
    import echarts from "echarts";
    export default {
        name: "timeLineChart",
        props: ["profileId"],
        data(){
            return{
                initflag: false,
                value3: true,
                mapWidth: 100 + '%',
                projectId: "",
                queryPointlist: null,
                crossSectionlist: 164,
                longitudinalSectionlist: null,
                firstTime: [],
                type: [
                    {id:1,name:"设备数据"},
                    {id:2,name:"人工数据"}
                ],
                typeCross: [
                    {id:1,name:"设备数据"},
                    {id:2,name:"人工数据"}
                ],
                typeLong: [
                    {id:1,name:"设备数据"},
                    {id:2,name:"人工数据"}
                ],
                typeid:"",
                typeCrossid:"",
                typeLongid:"",
                xAxis: [],
                series: [],
                transverseSectionxAxis: {
                    min: Date.now() - 3600 * 1000 * 24 * 30,
                    max: Date.now(),
                    type: 'value'
                },
                transverseSectionseries: [],
                transverseSectionseries1: [],
                longitudinalSectionsxAxis: {
                    min: Date.now() - 3600 * 1000 * 24 * 30,
                    max: Date.now(),
                    type: 'value'
                },
                longitudinalSectionsseries: [],
                longitudinalSectionsseries1: [],
                value2: [],
                value5: [],
                value8: [],
                queryPoint: [],
                crossSection: [],
                longitudinalSection: [],
                options1: [],
                tCheckedByDay: true,
                lCheckedByDay: false,
                chartLine: null,
                transverseSection: null,
                longitudinalSections: null,
                pickerOptions2: {
                    //仅当天前时间
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6
                    },
                    shortcuts: this.shortcuts
                },
                pickerOptions3: {
                    //仅当天前时间
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6
                    },
                    shortcuts: this.shortcuts
                },
                pickerOptions4: {
                    //仅当天前时间
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6
                    },
                    shortcuts: this.shortcuts
                },

            };
        },
        watch: {
            profileId: {
                handler(newdata, olddata) {
                    this.crossSectionlist = newdata;
                    this.inquireCross();
                },
            }
        },
        methods:{
            date() {
                const end = new Date();
                var seperator1 = "-";
                var year = end.getFullYear();
                var month = end.getMonth()+1;
                var strDate = end.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var endDate= year + seperator1 + month + seperator1 + strDate;
                const start = new Date();
                var startYear = start.getFullYear()-1;
                var startMonth = start.getMonth()+1;
                var startDate = start.getDate();
                if (startMonth >= 1 && startMonth <= 9) {
                    startMonth = "0" + startMonth;
                }
                if (startDate >= 0 && startDate <= 9) {
                    startDate = "0" + startDate;
                }
                var startDat = startYear + seperator1 + startMonth + seperator1 + startDate;
                this.value2 = [startDat,endDate]
                this.value5 = [startDat,endDate]
                this.value8 = [startDat,endDate]
            },
            inquire(){
                let data = {
                    id:this.queryPointlist,
                    beginDate:this.value2[0],
                    endDate:this.value2[1],
                    type:this.typeid
                }
                this.projectModel
                    .collectData(data)
                    .then(res => {

                        this.xAxis = res.data.xAxis;
                        this.series = res.data.series;
                        this.drawCharts();
                    })
                    .catch(err => {
                        console.log(err.message);
                    });
            },
            drawCharts() {
                this.drawLineChart();
            },
            drawLineChart() {
                //沉降曲线图
                if(this.transverseSection== null )
                    this.transverseSection = echarts.init(document.getElementById("transverseSection"));
                else
                    this.transverseSection.clear();
                var _this = this;

                _this.series1 = [];
                var names = [];
                for (var i = 0; i < _this.transverseSectionseries.length; i++) {
                    _this.series1.push({
                        name: _this.transverseSectionseries[i].name,
                        type: "line",
                        data: _this.transverseSectionseries[i].value,
                        smooth: false
                    });
                    names.push(_this.transverseSectionseries[i].name);
                }

                this.transverseSection.setOption({
                    title: {
                        text: _this.value5[0]+"至"+_this.value5[1]+" "+_this.transverseSectionseries[0].name+" 时程线",
                        left: "center"
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        },
                        formatter: _this.transverseSectionxAxis.type == 'value' ? function(params) {
                            return  moment(params[0].data[0]).format('YYYY-MM-DD') + '<br/>'
                                + params[0].seriesName + ' : ' + params[0].data[1];
                        } : undefined
                    },
                    legend: {
                        top: 30,
                        data: names,
                    },
                    grid: {
                        top: 110
                    },
                    toolbox: {
                        // orient: 'vertical',
                        x: 'left',
                        itemSize: 16,
                        show: true,
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                        {
                            name: '日期',
                            min:_this.transverseSectionxAxis.min,
                            max:_this.transverseSectionxAxis.max,
                            type: _this.transverseSectionxAxis.type,
                            boundaryGap: true,
                            data: _this.transverseSectionxAxis.data,
                            axisLabel: {
                                formatter: function(value) {
                                    if(_this.transverseSectionxAxis.type == 'value')
                                        return moment(value).format('YYYY-MM-DD');
                                    else
                                        return value;
                                }
                            },
                            axisPointer: {
                                triggerOn:"click"
                             }
                        }
                    ],
                    yAxis: [
                        {
                            name: '累计变化量(mm)',
                            type: "value"
                        }
                    ],
                    series: _this.series1
                },true);
                if(!this.initflag)
                {
                    this.transverseSection.getZr().on('click',params=>{
                        const pointInPixel= [params.offsetX, params.offsetY];
                        if (_this.transverseSection.containPixel('grid',pointInPixel)) {
                            let xIndex=_this.transverseSection.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];

                            var coldata = [];
                            var names = [];
                            for(var i = 0; i < _this.series1.length; i++) {
                                var serie = _this.series1[i];
                                var item = [];
                                var ss = serie.name.split('-');
                                if(ss.length == 3) {
                                    item.push(Number(ss[2]));
                                }

                                item.push(serie.data[xIndex]);
                                coldata.push(item);
                            }
                            _this.$emit("profileCoDataChange",coldata);

                            /** 点击响应数据 */
                            // console.log(coldata);
                            // // var codata= [
                            // //     [96.24, 111.35],
                            // //     [313.09, 851.11],
                            // //     [517.60, 316.61],
                            // // ];
                            // _this.$emit("profileCoDataChange",coldata);
                        }
                    });

                    window.addEventListener('resize', function() {
                        _this.transverseSection.resize() //初始化的
                    } )
                    this.initflag = true;
                }
            },
            inquireCross(){
                // console.log(this.crossSectionlist);
                // console.log(this.value5[0]);
                // console.log(this.tCheckedByDay );
                if(this.crossSectionlist != null && this.value5[0] != undefined && this.value5[1]){
                    let data = {
                        projectId: this.projectId,
                        beginDate: this.value5[0],
                        endDate: this.value5[1],
                        type: this.typeCrossid,
                        monitorItemId: "8",
                        groupId:this.crossSectionlist,
                        resultType: this.tCheckedByDay ? 1 : 2
                    }
                    this.projectModel
                        .collectData(data)
                        .then(res => {
                            this.transverseSectionxAxis = res.data.xAxis;
                            this.transverseSectionseries = res.data.series;
                            this.drawCharts();
                        })
                        .catch(err => {

                        });
                }else{
                }
            },
            inquireLong(){
                if(this.longitudinalSectionlist != null && this.value8[0] != undefined && this.value8[1]){
                    let collect1 = {
                        projectId: this.projectId,
                        beginDate: this.value8[0],
                        endDate: this.value8[1],
                        type: this.typeLongid,
                        monitorItemId: "8",
                        groupId: this.longitudinalSectionlist,
                        resultType: this.lCheckedByDay ? 1 : 2
                    };
                    this.projectModel
                        .collectData(collect1)
                        .then(res => {

                            this.longitudinalSectionsxAxis = res.data.xAxis;
                            this.longitudinalSectionsseries = res.data.series;
                            this.longitudinalSectionsseries1 = res.data.series;
                            this.drawCharts();
                        })
                        .catch(err => {
                            console.log(err.message);
                        });
                }
            },
            initChart1() {
                this.chart = echarts.init(document.getElementById("transverseSection"));
                // 把配置和数据放这里
                var _this = this;
                this.chart.setOption({
                    title: {
                        text:  _this.value2[0]+"至"+_this.value2[1]+"    "+ "沉降曲线图",
                        left: "center"
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: [10, 52, 200, 334, 390, 330, 220]
                    }]
                } ,
                    true
                )
            },
            visibleModeChange(e){
                    this.tCheckedByDay = e;
                    this.inquireCross();
            }
        },
        mounted(){
            this.projectId = this.$route.query.projectId;
            this.date();
            let data = {
                projectId: this.projectId,
                monitorItemId: "8",
                resultType: "3"
            };
            let landSubsidenceProfileData = {
                projectId: this.projectId,
                monitorItemId: 14,
                recursion: 1,
                parentId: -1
            };
            //this.crossSection[0].id = 146;
            this.projectModel
                .querylandSubsidenceProfile(landSubsidenceProfileData)
                .then(res => {
                    this.crossSection = res.data.list;
                    if(this.crossSection.length > 1) {
                        this.crossSectionlist = 146;// this.crossSection[1].id;//146;//
                        //this.initChart1();
                        this.inquireCross();
                    }
                })
                .catch(err => {
                    console.log(err.message);
                });

        }
    }
</script>

<style scoped>
    .box-card {
        width: 100%;
        /*height: 380px;*/
    }
    .chartLine{
        height:320px
    ;
    }
    .proSwitch{
        float: right;
        margin-top: -25px;
    }
    .cygSw{
        text-align: center;
        display: block;
        font-size: 24px;
        font-weight: bold;
    }
</style>
